<template>
  <div>
    <p>{{ vTitle }}</p>

    <div class="my-3 text-primary">
      <p>{{ append }}</p>
    </div>

    <div class="flex-center">
      <el-input v-model="todo" type="text" class="form-control" />
      <el-button type="primary" class="btn btn-primary" @click="add">Add</el-button>
    </div>
    <p>[TodoLength: {{ todoLength }}, 数量: {{ itemsQuantity }}]</p>

    <div class="list-group">
      <div
        class="flex-center"
        v-for="(item,index) in items"
        :key="index"
      >
        <div class="card-style">{{ item }}</div>
        <button class="close" @click="remove(index)">
          <span>&times;</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    initInput: {
      type: String,
      default: ''
    }
  },
  computed: {
    vTitle () {
      return '-' + this.title + '-'
    },
    itemsQuantity () {
      return this.items.length
    }
  },
  data () {
    return {
      todo: this.initInput,
      todoLength: 0,
      items: ['A', 'B'],
      append: ''
    }
  },
  watch: {
    // todo (value) {
    //   this.todoLength = value.length
    // },
    todo: {
      handler: function (value) {
        this.todoLength = value.length
      },
      immediate: true
    },
    items: {
      handler: function (value) {
        console.log('value', value)
        this.append = ''
        value.forEach(item => {
          this.append += item + ' '
        })
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    add () {
      if (this.todo) {
        this.items.push(this.todo)
        this.todo = ''
      }
    },

    remove (index) {
      this.items.splice(index, 1)
    }
  },
  beforeMount () {
    console.log('V2 beforeMount!')
  },
  mounted () {
    console.log('V2 mounted!')
  }
}
</script>

<style lang="less">
@import '~@/common/less/normal.less';

</style>
